{% load notifications_tags %}
{% notifications_unread as unread_count %}

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
    <!-- 导航 -->
    <a class="navbar-brand hvr-grow-rotate" href="/" style="font-size: 1.2em;">
        Hyy's Blog
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link mr-2" href="/">
                    文章
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link mr-2" href="/">
                    应对
                </a>
            </li>
        </ul>

        <ul class="navbar-nav ml-md-auto" style="margin: -5px 0 -5px 0;">
            {% if user.is_authenticated %}
            <ul>
                <li class="nav-item dropdown" style="float: right;list-style: none">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
                       data-toggle="dropdown"
                       aria-haspopup="true" aria-expanded="false">
                        <!-- 新增代码，小红点 -->
                        {% if unread_count %}
                        <svg viewBox="0 0 8 8"
                             width="8px"
                             height="8px">
                            <circle cx="4"
                                    cy="4"
                                    r="4"
                                    fill="#ff6b6b"
                            ></circle>
                        </svg>
                        {% endif %}
                        {{ user.username }}
                    </a>
                    <!-- 用户下拉条item -->
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="{% url 'notice:list' %}">通知
                            {% if unread_count %}
                            <span class="badge badge-danger">{{ unread_count }}</span>
                            {% endif %}
                        </a>
                        <a class="dropdown-item" href="{% url 'article:article_create' %}">写文章</a>
                        <a class="dropdown-item" href='{% url "userprofile:edit" user.id %}'>个人信息</a>
                        <a class="dropdown-item" href="#" onclick="user_delete()">删除用户</a>
                        <a class="dropdown-item" href='{% url "userprofile:logout" %}'>退出登录</a>
                    </div>
                </li>
                <li class="nav-item dropdown" style="float: right;list-style: none">
                    {% if user.profile.avatar %}
                    <div align="ceter">
                        <img class="zoomImage_header" src="{{ user.profile.avatar.url }}">
                    </div>
                    {% elif user.socialaccount_set.exists %}
                    <div align="ceter">
                        <img class="zoomImage_header" src="{{ user.socialaccount_set.all.0.get_avatar_url }}">
                    </div>
                    {% else %}
                    <div align="ceter">
                        <img class="zoomImage_header" src="./media/avatar/default_avatar.jpg">
                    </div>
                    {% endif %}
                </li>
            </ul>
            <!-- 如果用户未登录，则显示 “登录” -->
            {% else %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'account_login' %}">登录</a>
            </li>
            <!-- if 语句在这里结束 -->
            {% endif %}
        </ul>

    </div>
</nav>

{% if user.is_authenticated %}
<form
        style="display:none;"
        id="user_delete"
        action="{% url 'userprofile:delete' user.id %}"
        method="POST"
>
    {% csrf_token %}
    <button type="submit">发送</button>
</form>
<script>
    function user_delete() {
        // 调用layer弹窗组件
        layer.open({
            title: "确认删除",
            content: "确认删除用户资料吗？",
            yes: function (index, layero) {
                $('form#user_delete button').click();
                layer.close(index);
            },
        })
    }

    var onResize = function () {
        $("body").css("margin-top", $(".navbar").height());
    };
    $(window).resize(onResize);
    $(function () {
        onResize();
    });
</script>
{% endif %}
